<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <style>
        body {
            color: #333;
            font-size: 12px;
            font-family: "Microsoft YaHei"
        }
        *{
            margin: 0px;
            padding:0px;
        }
        .div1{
            padding:1px;
            display: block;
            width:360px;
            height:360px;
            background:red;
            text-align:center;
            background-image:url('img/zhuan_new.png');
            background-position:center;
            background-size:contain;
            background-repeat:no-repeat;
        }

        .div2{
            display: block;
            position:fixed;
            width:360px;
            float:center;
            margin-top:-362px;
            height:360px;
            text-align:center;
            background-image:url('img/jt2.png');
            background-position:50% 50%;
            background-size:80px 95px;
            background-repeat:no-repeat;
        }
        #wheelcanvas{
            width:360px;
            height:360px;
        }
    </style>
</head>
<body>
    <div class="div1">
        <canvas id="wheelcanvas" width="422" height="422">

        </canvas>
        <div class="div2">

        </div>
    </div>
    <div style="border: 2px solid;margin: 5px;padding: 5px;border-radius:10px;border-bottom-color:white;width:40px;height:40px;border-top-color: red;border-bottom-left-radius: 40px;border-top-right-radius: 40px;">

    </div>


</body>
<script>
    window.onresize=function(){
        console.log("宽度===="+window.width);
        var canvas = document.getElementById("wheelcanvas");
        var ctx = canvas.getContext("2d");
        //在给定矩形内清空一个矩形
        ctx.clearRect(0, 0, 422, 422);
        ctx.strokeStyle = "#FFBE04";
        ctx.fillStyle = "#FFD700";
        ctx.arc(210.5, 209.5, 180, 0, 360, false);
        ctx.arc(210.5, 209.5, 40, 360, 0, true);
        ctx.stroke();
        ctx.fill();
    };
    window.onresize();
</script>
</html>